<template>
    <el-table :data="store.getters['role/getRole']" style="width: 100%; margin-bottom: 20px" row-key="id" border
        default-expand-all :tree-props="{ children: 'children' }">
        <el-table-column prop="id" label="角色编号" sortable width="180"></el-table-column>
        <el-table-column prop="rolename" label="角色名称" width="180"></el-table-column>

        <el-table-column prop="status" label="状态">
            <template v-slot="item">
                <el-button v-if="item.row.status === 1" type="primary" size="small">启用</el-button>
                <el-button v-else type="danger" size="small">禁用</el-button>
            </template>
        </el-table-column>

        <el-table-column label="操作">
            <template v-slot="scope">
                <el-button @click="edit(scope.row.id)" type="primary" size="small">编辑</el-button>
                <el-button @click="del(scope.row.id)" type="danger" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts" setup>
import { useStore } from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { roleDel } from '@/request/api'
import { defineEmits} from 'vue'

const store = useStore()
store.dispatch('role/listActions')

//子传父
let emits = defineEmits(['edit'])


const edit = (id: any) => {
    emits('edit',id)
}


const del = (id: any) => {
    // console.log(id);
    ElMessageBox.confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        roleDel({ id }).then((res: any) => {
            // console.log(res);
            if (res.code === 200) {
                //消息提示
                ElMessage.success(res.msg)
                //更新列表
                store.dispatch('role/listActions')
            } else {
                ElMessage.error(res.msg)
            }
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        });
    })
}
</script>

<style></style>